<template>
	<!-- <div> -->
	<div class="userInfo">
		<div class="head">
			<div class="iconfont icon-meum"></div>
			<div class="content">个人中心</div>
			<router-link tag="div" class="iconfont icon-sousuo" to="/base/search"></router-link>
		</div>

		<div class="top" v-show="uInfo">
			<van-image round width="8rem" height="8rem" :src="uInfo.userImg" />
			<h2>
				{{ uInfo.Nickname || "请登录" }}
			</h2>
		</div>

		<div class="userContent">
			<ul class="mes">
				<li>
					<div class="iconfont icon-xihuan-wangyiicon" @click="$router.push('/userInfo/recPlayed')"></div>
					<p>我的喜欢</p>
				</li>

				<li>
					<div class="iconfont icon-24gf-musicAlbum" @click="$router.push('/userInfo/localDownload')"></div>
					<p>本地/下载</p>
				</li>

				<li>
					<div class="iconfont icon-shangchuanyunpan" @click="$router.push('/userInfo/cloudDisk')"></div>
					<p>云盘</p>
				</li>

				<li>
					<div class="iconfont icon-yigou1" @click="$router.push('/userInfo/purchased')"></div>
					<p>已购</p>
				</li>

				<li>
					<div class="iconfont icon-haoyou" @click="$router.push('/attention')"></div>
					<p>我的好友</p>
				</li>

				<li>
					<div class="iconfont icon-shoucang" @click="$router.push('/userInfo/collection')"></div>
					<p>收藏和赞</p>
				</li>

				<li>
					<div class="iconfont icon-mayi-diantai" @click="$router.push('/userInfo/studio')"></div>
					<p>广播电台</p>
				</li>

				<li>
					<div class="iconfont icon-shipin" @click="$router.push('/userInfo/podcast')"></div>
					<p>我的播客</p>
				</li>
			</ul>
		</div>

		<van-tabs v-model="active" class="toggle">
			<van-tab title="创建歌单">
				<div class="listMenu">
					<ul>
						<h3>创建歌单({{ sNum.createdPlaylistCount }}个)</h3>

						<li v-for="(item, index) in list" :key="item.id" v-show="index < sNum.createdPlaylistCount"
							@click="$router.push('/userInfo/singList?id=' + item.id)">
							<div class="img">
								<img :src="item.coverImgUrl" alt="" />
							</div>

							<div class="like">
								<h3>{{ item.name }}</h3>
								<span>{{ item.trackCount || "n" }}首</span>
							</div>
						</li>
					</ul>
				</div>
			</van-tab>

			<van-tab title="收藏歌单">
				<div class="likeMenu">
					<ul>
						<h3>收藏歌单({{ sNum.subPlaylistCount }}个)</h3>

						<li v-for="(item, index) in list" :key="item.id" v-show="index >= sNum.createdPlaylistCount"
							@click="$router.push('/userInfo/singList?id=' + item.id)">
							<div class="img">
								<img :src="item.coverImgUrl" alt="" />
							</div>

							<div class="like">
								<h3>
									{{ item.name }}
								</h3>
								<span>{{ item.trackCount || "n" }}首</span>
							</div>
						</li>
					</ul>
				</div>
			</van-tab>
		</van-tabs>
	</div>
	<!-- </div> -->
</template>

<script>
	import {
		getMyself,
		getNumMes,
		getMyselfList
	} from "../api/myself";

	export default {
		props: ["uid"],
		data() {
			return {
				active: 0,
				uInfo:null,
				sNum: {
					createdPlaylistCount: null,
					subPlaylistCount: null,
				},
				list: null,
			};
		},
		methods: {
			getMyselfFun() {
				getMyself({
					id: this.uid
				}).then((data) => {
					console.log(data);
					this.uInfo = data.data;
					console.log(this.uInfo);
				});
			},
			getNumMesFun() {
				getNumMes().then((data) => {
					console.log(data);
					this.sNum = data;
				});
			},
			getMyselfListFun() {
				getMyselfList({
					uid: this.uid
				}).then((data) => {
					console.log(data);
					this.list = data.playlist;
				});
			},
		},
		created() {
			// this.getNumMesFun();
			this.getMyselfFun();
			// this.getMyselfListFun();
			this.$emit("getnavs-btn", true);
		},
	};
</script>

<style lang="less">
	.userInfo {
		width: 100%;
		height: 100%;
		padding-bottom: 200px;
		background-color: #0F172A;
		.head {
			display: flex;
			justify-content: space-between;
			padding: 5px;
			background-color: #0F172A;
			color: #fff;

			.content {
				flex: 1;
				text-align: center;
				font-size: 20px;
				line-height: 30px;
			}

			.iconfont {
				// color: #243DE2;
				flex: 0 0 40px;
				text-align: center;
				padding: 5px 0;
				font-size: 25px;
			}
		}

		.top {
			width: 100%;
			min-height: 50px;
			text-align: center;
			padding: 15px 0;

			h2 {
				margin-top: 8px;
			}
		}

		.userContent {
			width: 100%;
			min-height: 50px;
			padding: 10px;
			box-sizing: border-box;

			.mes {
				width: 100%;
				min-height: 50px;
				display: flex;
				flex-wrap: wrap;
				padding: 10px;
				box-sizing: border-box;

				li {
					width: 25%;
					text-align: center;
					padding-bottom: 10px;

					.iconfont {
						font-size: 30px;
						color: #243DE2;
					}

					p {
						color: #fff;
						padding-top: 8px;
					}
				}
			}
		}
			
		.van-tab{
			color: #fff !important;
		}
		
		.van-tabs__nav{
			background-color: #0F172A;
			
		}
			
		.van-tabs__line{
			background-color: #243DE2;
		}
		.listMenu,
		.likeMenu {
			ul {
				padding: 15px;

				h3 {
					font-size: 14px;
					color: #fff;
					padding: 10px 0;
				}

				li {
					display: flex;
					padding-bottom: 10px;

					.img {
						flex: 0 0 40px;
						width: 80px;
						height: 80px;
						border-radius: 10px;
						padding-right: 10px;

						img {
							width: 80px;
							height: 80px;
							border-radius: 10px;
						}
					}

					.like {
						flex: 1;
						padding: 20px 0;

						h3 {
							padding: 0;
							font-size: 16px;
							color: #FFFFFF;
							// 1、固定宽度（高度可有可无）：width: 195px;
							// 2、把盒子转成弹性伸缩盒子：
							display: -webkit-box;
							// 3、弹性盒子排列方式：垂直排列：
							-webkit-box-orient: vertical;
							// 4、规定显示几行文本：
							-webkit-line-clamp: 1;
							// 5、溢出隐藏：
							overflow: hidden;
						}

						span {
							font-size: 12px;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
